import React, { useEffect, useState } from 'react';
import Checkbox from '@knownsec/react-component/dist/Checkbox';
import Select from '@knownsec/react-component/dist/Select';
import s from './style.module.css';
import cn from 'classnames';
import {
  WARNING_CATEGORY_KEY_LABEL_MAP,
  VUL_LEVEL_EN_CN_MAP,
} from '../../../../../../../common/constants';
const webType = ['vul', 'ssl', 'securityEvent', 'content','changeCheck'];
const aviType = ['http', 'ping'];
const defaultTypeDetail = {
	vul: ["critical", "high", "medium", "low"],
	ssl: ["protocol", "certificate"],
	content: ["keyword", "privacy_disclosure"],
	securityEvent: ["black_links", "broken_links", "cryjack", "malscan", "foreign_links"],
  changeCheck: ["high", "low"],
}
const typeSelectOptions = Object.keys(defaultTypeDetail).reduce((t,k) => {
	if (k === 'vul'||k === 'changeCheck') {
		t[k] = defaultTypeDetail[k].map(i => { return { label: VUL_LEVEL_EN_CN_MAP[i], value: i }})
	}
  else {
		t[k] = defaultTypeDetail[k].map(i => { return { label: WARNING_CATEGORY_KEY_LABEL_MAP[k][i], value: i }})
	}
	return t
}, {})

const MAX_SCAN_TYPE = 5 // web安全监测项最大数量
export default function alertTypeBox({ value = {}, onChange }) {
	const [type, setType] = useState(value?.type);
	const [typeDetail, setTypeDetail] = useState(value?.typeDetail)
	const [security, setSecurity] = useState(true);
	const [avail, setAvail] = useState(true);
	const [num, setNum] = useState(5);
	const [numAvi, setNumAvi] = useState(2);

	const handleTye = (key, val) => {
		if (webType.includes(key)) {
			val ? setNum(num + 1) : setNum(num - 1);
		}
		if (aviType.includes(key)) {
			val ? setNumAvi(numAvi + 1) : setNumAvi(numAvi - 1);
		}
		setType({ ...type, [key]: val });
		onChange({ type: {...type, [key]: val }, typeDetail });
	};
	const handleDetail = (key, val) => {
		setTypeDetail({ ...typeDetail, [key]: val });
		onChange({ type, typeDetail: {...typeDetail, [key]: val }});
	};
	const allType = (key, val) => {
		const obj = {};
		if (key === 'security') {
			setSecurity(val);
			webType.map(e => {
				obj[e] = val;
			});
			val ? setNum(MAX_SCAN_TYPE) : setNum(0);
		} else {
			setAvail(val);
			aviType.map(e => {
				obj[e] = val;
			});
			val ? setNumAvi(2) : setNumAvi(0);
		}
		setType({ ...type, ...obj });
		onChange({ type: { ...type, ...obj }, typeDetail });
	};
	useEffect(() => {
		if (value.constructor === Object) {
			setType(value.type);
			setTypeDetail(value.typeDetail)
			const webArr = webType.filter(e => {
				return value.type[e];
			});
			const aviArr = aviType.filter(e => {
				return value.type[e];
			});
			setNum(webArr.length);
			setNumAvi(aviArr.length);
		}
	}, [value]);
	useEffect(() => {
		setSecurity(num === MAX_SCAN_TYPE);
		setAvail(numAvi === 2);
	}, [type, num, numAvi]);
	return (
		<div className={s.main}>
			<Checkbox
				className={cn(s.Checkbox, s.mTop4, {
					[s.boxselect]: num > 0 && num < MAX_SCAN_TYPE,
				})}
				onChange={e => {
					allType('security', e.value);
				}}
				pro
				checked={security}
				borderless={true}
			>
				Web安全监测 ({num}/{MAX_SCAN_TYPE})
			</Checkbox>
			<div className={s.webBox}>
				<div className='df aic'>
					<Checkbox
						onChange={e => {
							handleTye('vul', e.value);
						}}
						pro
						checked={type.vul}
						borderless={true}
					>
						Web漏洞
					</Checkbox>
					<Select
						placeholder='请选择Web漏洞监测项'
						multiple
						clearable
						disabled={!type.vul}
						className={cn('flex1 ml10', {[s.lh45]: !typeDetail?.vul?.length}, {'disSelect': !type.vul})}
						value={typeDetail.vul}
						onChange={({ selectedItem }) => { handleDetail('vul', selectedItem.map(item => { return item.value })) }}
						option={typeSelectOptions.vul} />
				</div>
				<div className='df aic'>
					<Checkbox
						onChange={e => {
							handleTye('ssl', e.value);
						}}
						pro
						checked={type.ssl}
						borderless={true}
					>
						SSL安全
					</Checkbox>
					<Select
						placeholder='请选择SSL安全监测项'
						multiple
						clearable
						disabled={!type.ssl}
						className={cn('flex1', s.ml12, {[s.lh45]: !typeDetail?.ssl?.length}, {'disSelect': !type.ssl})}
						value={typeDetail.ssl}
						onChange={({ selectedItem }) => { handleDetail('ssl', selectedItem.map(item => { return item.value })) }}
						option={typeSelectOptions.ssl} />
				</div>
				<div className='df aic'>
					<Checkbox
						onChange={e => {
							handleTye('securityEvent', e.value);
						}}
						pro
						checked={type.securityEvent}
						borderless={true}
					>
						安全事件
					</Checkbox>
					<Select
						placeholder='请选择安全事件监测项'
						multiple
						clearable
						disabled={!type.securityEvent}
						className={cn('flex1 ml10', {[s.lh45]: !typeDetail?.securityEvent?.length}, {'disSelect': !type.securityEvent})}
						value={typeDetail.securityEvent}
						onChange={({ selectedItem }) => { handleDetail('securityEvent', selectedItem.map(item => { return item.value })) }}
						option={typeSelectOptions.securityEvent} />
				</div>
				<div className='df aic'>
					<Checkbox
						onChange={e => {
							handleTye('content', e.value);
						}}
						pro
						checked={type.content}
						borderless={true}
					>
						内容违规
					</Checkbox>
					<Select
						placeholder='请选择内容违规监测项'
						multiple
						clearable
						disabled={!type.content}
						className={cn('flex1 ml10', {[s.lh45]: !typeDetail?.content?.length}, {'disSelect': !type.content})}
						value={typeDetail.content}
						onChange={({ selectedItem }) => { handleDetail('content', selectedItem.map(item => { return item.value })) }}
						option={typeSelectOptions.content} />
				</div>
        <div className='df aic'>
					<Checkbox
						onChange={e => {
							handleTye('changeCheck', e.value);
						}}
						pro
						checked={type.changeCheck}
						borderless={true}
					>
						篡改监测
					</Checkbox>
					<Select
						placeholder='请选择篡改监测项'
						multiple
						clearable
						disabled={!type.changeCheck}
						className={cn('flex1 ml10', {[s.lh45]: !typeDetail?.changeCheck?.length}, {'disSelect': !type.changeCheck})}
						value={typeDetail.changeCheck}
						onChange={({ selectedItem }) => { handleDetail('changeCheck', selectedItem.map(item => { return item.value })) }}
						option={typeSelectOptions.changeCheck} />
				</div>
			</div>
			<Checkbox
				onChange={e => {
					allType('avail', e.value);
				}}
				className={cn(s.Checkbox, {
					[s.boxselect]: numAvi === 1,
				})}
				pro
				checked={avail}
				borderless={true}
			>
				可用性监测 ({numAvi}/2)
			</Checkbox>
			<div className={cn(s.webBox, s.subW40p, 'df')}>
				<Checkbox
					onChange={e => {
						handleTye('http', e.value);
					}}
					pro
					checked={type.http}
					borderless={true}
				>
					HTTP
				</Checkbox>
				<Checkbox
					onChange={e => {
						handleTye('ping', e.value);
					}}
					pro
					checked={type.ping}
					borderless={true}
				>
					Ping
				</Checkbox>
			</div>
			<Checkbox
				onChange={e => {
					handleTye('asset', e.value);
				}}
				pro
				className={s.Checkbox}
				checked={type.asset}
				borderless={true}
			>
				资产变动监测
			</Checkbox>
			<div className='df aic mb10'>
				<Checkbox
					onChange={e => {
						handleTye('hostVul', e.value);
					}}
					pro
					checked={type.hostVul}
					borderless={true}
				>
					主机安全监测
				</Checkbox>
				<Select
					placeholder='请选择主机安全监测项'
					multiple
					clearable
					disabled={!type.hostVul}
					className={cn('flex1', s.ml14, {[s.lh45]: !typeDetail?.hostVul?.length}, {'disSelect': !type.hostVul})}
					value={typeDetail.hostVul}
					onChange={({ selectedItem }) => { handleDetail('hostVul', selectedItem.map(item => { return item.value })) }}
					option={typeSelectOptions.vul} />
			</div>
		</div>
	);
}
